import {esri} from "../../api/esriAPI";
import {ArcgisTool} from "../../ArcgisTool";


export const OverViewUtil = class {
  _saveOverViewMap = new Map();
  _manageView = null;

  constructor(manageView) {
    this._manageView = manageView;
  }

  add(key, mapConfig, styles) {
    let {_saveOverViewMap} = this;
    if (_saveOverViewMap.has(key)) {
      console.error("该key的概览图已存在，创建失败", key)
      return
    }
    let overView = new OverView(this._manageView, mapConfig, styles);
    _saveOverViewMap.set(key, overView);
    return overView;
  }

  remove(key) {
    let {_saveOverViewMap} = this;
    if (_saveOverViewMap.has(key)) {
       _saveOverViewMap.get(key).remove();
       _saveOverViewMap.delete(key);
    }
  }

  switchOverview(key,visible){
    let {_saveOverViewMap} = this;
    if (_saveOverViewMap.has(key)) {
      _saveOverViewMap.get(key).switchOverview(visible);
    }
  }
}

/**
 * 概览图
 * @class
 * */
class OverView {
  arcgisTool =null;//概览图的arcgisTool对象，用于控制概览图的所有地图操作
  _manageView = null;//主视图的view管理
  _mainView = null;//主视图
  _mapView = null;//概览图
  _overviewDiv = null;//概览图的DOM对象
  _maskDiv = null;//遮罩层的DOM对象
  _mapId = null;//概览图DOM的id
  _maskId = null;//遮罩层DOM的id
  _isVisible = true;//当前的概览图是否显示
  _mianView_extent = null;//mainView监听事件
  _mapView_extent = null;//mapView的监听事件
  constructor(manageView, mapConfig, styles) {
    let mapIdNode = manageView.getDOM();
    let {overviewDiv, maskDiv, mapId, maskId} = this._createOverviewDOM(mapIdNode, styles);
    let arcgisTool = new ArcgisTool(mapId);
    let mainView = manageView.getView();
    let mapView = arcgisTool.manageView.applyMapView(mapConfig);
    mapView.ui.components = [];
    mapView.when(() => {
      //主视图的监听extent
      this._mianView_extent = mainView.watch("extent", this._updateOverviewExtent.bind(this));
      //概览图的监听extent
      this._mapView_extent = mapView.watch("extent", this._updateOverviewExtent.bind(this));
      // 主视图静止时更新小地图概述
      esri.watchUtils.when(mainView, "stationary", this._updateOverview.bind(this));
    })
    //保留记录
    this.arcgisTool = arcgisTool;
    this._manageView = manageView;
    this._overviewDiv = overviewDiv;
    this._maskDiv = maskDiv;
    this._mapId = mapId;
    this._maskId = maskId;
    this._mapView = mapView;
    this._mainView = mainView;
  }

  remove(){
    console.log(this._mapId, this._maskId)
    //移除监听
    this._mianView_extent && this._mianView_extent.remove();
    this._mapView_extent && this._mapView_extent.remove();
    this._mianView_extent = null;
    this._mapView_extent = null;
    //移除地图的DOM
    this.arcgisTool.manageView.removeMapView();
    //移除最外层概览图的DOM
    let pDom = this._manageView.getMapViewDOM();
    pDom.removeChild(this._overviewDiv);
  }

  switchOverview(visible){
    this._isVisible = visible;
    this._overviewDiv.style.display = visible ? "" : "none";
  }

  /**
   * 更新概览图，其中:
   * 将MapView动画化为缩小比例，以便我们获得一个很好的概述。
   * 我们使用goTo的“progress”回调来更新动画时的概览范围
   */
  _updateOverview() {
    if(!this._isVisible){
      return;
    }
    let mapView = this._mapView;
    let mainView = this._mainView;
    mapView.goTo({
      center: mainView.center,
      scale:
      mainView.scale *
      2 *
      Math.max(
        mainView.width / mapView.width,
        mainView.height / mapView.height
      )
    });
  }

  /**
   * 更新概览图的extent，同时修改遮罩层的大小
   *
   * 通过将SceneView范围转换为更新概述范围
   * MapView屏幕坐标并更新extentDiv位置
   */
  _updateOverviewExtent() {
    if(!this._isVisible){
      return;
    }
    let mapView = this._mapView;
    let mainView = this._mainView;
    let extent = mainView.extent;
    let maskDiv = this._maskDiv;
    var bottomLeft = mapView.toScreen(
      new esri.Point({
        x: extent.xmin,
        y: extent.ymin,
        spatialReference: extent.spatialReference
      })
    );

    var topRight = mapView.toScreen(
      new esri.Point({
        x: extent.xmax,
        y: extent.ymax,
        spatialReference: extent.spatialReference
      })
    );

    maskDiv.style.top = topRight.y + "px";
    maskDiv.style.left = bottomLeft.x + "px";

    maskDiv.style.height = bottomLeft.y - topRight.y + "px";
    maskDiv.style.width = topRight.x - bottomLeft.x + "px";
  }

  _createOverviewDOM(mapIdNode, styles = {}) {
    let mapId = "概览图" + new Date().getTime();
    let maskId = "遮罩层" + new Date().getTime();
    //创建概览图层的DOM对象
    let overviewDiv = document.createElement("div");
    overviewDiv.id = mapId;
    overviewDiv.style.width = "300px";
    overviewDiv.style.height = "300px";
    if (!styles["bottom"]) {
      overviewDiv.style.top = "10px";
    }
    overviewDiv.style.right = "10px";
    overviewDiv.style.backgroundColor = "#fff"
    overviewDiv.style.border = "1px dashed red"
    overviewDiv.style.position = "absolute";
    overviewDiv.style.overflow = "hidden";
    for (let key in styles) {
      console.log(key, styles[key])
      overviewDiv.style[key] = styles[key];
    }
    mapIdNode.appendChild(overviewDiv);
    //创建遮罩层的DOM对象
    let maskDiv = document.createElement("div")
    maskDiv.id = maskId;
    maskDiv.style.position = "absolute";
    maskDiv.style.zIndex = 1;
    maskDiv.style.width = "30%";
    maskDiv.style.height = "30%";
    maskDiv.style.backgroundColor = "rgba(0,0,0,0.3)"
    overviewDiv.appendChild(maskDiv);
    return {
      mapId,
      maskId,
      overviewDiv,
      maskDiv
    }
  }


}
